<!--
 * @Descripttion: 
 * @version: 
 * @Author: hejin.gao
 * @Date: 2022-10-11 09:06:55
 * @LastEditors: hejin.gao
 * @LastEditTime: 2022-10-11 11:21:07
-->
<template>
  <div class="setting">
    <div class="theme">
      <div
        :class="theme == 'dark' ? 'color selected' : 'color'"
        style="background-color: #001024"
        @click="changeTheme('dark')"
      ></div>
      <div
        :class="theme == 'light' ? 'color selected' : 'color'"
        style="background-color: #049b5f"
        @click="changeTheme('light')"
      ></div>
      <div
        :class="theme == 'grey' ? 'color selected' : 'color'"
        style="background-color: #3d1f00"
        @click="changeTheme('grey')"
      ></div>
    </div>

    <div class="switch">
      <el-switch
        v-model="fps"
        active-text="FPS"
        active-color="#8ab4f8"
        inactive-color="#9aa0a6"
        @change="handleFpsChange"
      >
      </el-switch>
      <el-switch
        v-model="nav"
        active-text="罗盘"
        active-color="#8ab4f8"
        inactive-color="#9aa0a6"
        @change="handleNavChange"
      >
      </el-switch>
      <el-switch
        v-model="tools"
        active-text="工具"
        active-color="#8ab4f8"
        inactive-color="#9aa0a6"
        @change="handleToolsChange"
      >
      </el-switch>
      <el-switch
        v-model="eye"
        active-text="鹰眼"
        active-color="#8ab4f8"
        inactive-color="#9aa0a6"
        @change="handleEyeChange"
      >
      </el-switch>
    </div>

    <!-- <Scheme /> -->
    <Basemap />
  </div>
</template>

<script>
// import Scheme from "./Scheme.vue";
import Basemap from "./BaseMap.vue";
import { mapMutations, mapState } from "vuex";
import db from "../../../utils/localstorage";
import { isEmptyObject } from "../../../utils/tools";
import { set } from "vue";
export default {
  components: {
    // Scheme,
    Basemap,
  },
  data() {
    return {
      theme: "dark",
      fps: true,
      nav: true,
      tools: true,
      eye: true,
    };
  },
  computed: {},
  mounted() {
    // 回显设置
    let setting = db.get("setting");
    if (!isEmptyObject(setting)) {
      Object.keys(setting).map((key) => {
        if (setting[key] != undefined) {
          this[key] = setting[key];
        }
      });
    }
  },
  methods: {
    ...mapMutations("setting", ["changeProperty"]),
    changeTheme(_themes) {
      this.theme = _themes;
      window.document.documentElement.setAttribute("data-theme", _themes);
      this.saveSetting("theme", _themes);
    },
    handleFpsChange(bool) {
      viewer.scene.debugShowFramesPerSecond = bool;
      this.changeProperty({ key: "fps", value: bool });
      this.saveSetting("fps", bool);
    },
    handleNavChange(bool) {
      this.changeProperty({ key: "nav", value: bool });
      this.saveSetting("nav", bool);
    },
    handleToolsChange(bool) {
      this.changeProperty({ key: "tools", value: bool });
      this.saveSetting("tools", bool);
    },
    handleEyeChange(bool) {
      this.changeProperty({ key: "eye", value: bool });
      this.saveSetting("eye", bool);
    },
    saveSetting(key, value) {
      let setting = db.get("setting");
      setting[key] = value;
      db.save("setting", setting);
    },
  },
};
</script>

<style lang="scss" scoped>
.setting {
  .theme {
    width: 100%;
    justify-content: flex-end;
    display: inline-flex;
    padding: 5px;
    box-sizing: border-box;

    .color {
      width: 32px;
      height: 32px;
      cursor: pointer;
      border: 1px solid rgba(255, 255, 255, 0.442);
    }

    .selected {
      border: 1px solid yellow;
    }
  }

  .switch {
    width: 100%;
    padding: 5px 20px;
    display: inline-flex;
    box-sizing: border-box;
    // justify-content: flex-end;

    .el-switch {
      padding-right: 20px;
    }
  }
}

:deep .el-switch__label {
  color: #fff;
}
:deep .el-switch__label.is-active {
  color: #409eff;
}
</style>